<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }
    #tou>div{
        width: 125px;
        height: 50px;
        color: black;
       
        float: left;
        text-align: center;
        line-height: 50px;



    }

   
    .box {

        width: 750px;
        height: 150px;
        margin: 30px auto;

    }

    #tou{
        height: 50px;
        border-bottom: 2px solid #eee;
    }
    



    .pic {
        width: 750px;
        height: 500px;

        margin-top: 20px;
    }
    

   

    .pic>div:nth-of-type(2) {
        display: none;
    }

    .pic>div:nth-of-type(3) {
        display: none;
    }

    .pic>div:nth-of-type(4) {
        display: none;
    }

    .pic>div:nth-of-type(5) {
        display: none;
    }

    .pic>div:nth-of-type(6) {
        display: none;
    }

    .pic>div:nth-of-type(7) {
        display: none;
    }
      img{
        width: 750px;
        height: 500px;
    }
    #line{
        width: 120px;
        height: 5px;
        position: absolute;
        bottom: -5px;
        left: 0px;
        background-color:red;
     
    }
    #tou{
        position: relative;
       
    }

   
  
</style>

<body>
    <div class="box">
        <div id="tou">
            <div> 融e购</div>
            <div> 汇款支付</div>
            <div> 消费俞游</div>


            <div> 留学贷款</div>

            <div> 移动金融</div>
            <div> 个人贷款</div>
            <span id="line"></span>

        </div>
        <div class="pic" id="pic">
            <div> <img src="images/8.jpg  " /></div>

            <div> <img src="images/6.jpg  " /></div>

            <div> <img src="images/10.jpg  " /></div>

            <div> <img src="images/9.jpg  " /></div>
            <div> <img src="images/5.jpg  " /></div>
            <div> <img src="images/7.jpg  " /></div>

            <div><img src="images/2.jpg  " /> </div>
        </div>
    </div>
    <script>
         let   arrs = tou.children;
      
     let divs = pic.children;
       
        for (let i = 0; i < arrs.length; i++) {
            if(arrs[i].id=="line")  continue;
            arrs[i].onclick = function () {
                for (let j = 0; j < divs.length; j++) {
                    if(i==j){

                    divs[j].style.display = "block";
                    line.style.left=125*i+"px";
                   
                    }else{
                        divs[j].style.display="none";

                
                }
                }

            }

        }







    </script>


</body>

</html>